<template>
  <div class="container-box">
    <!-- 远程控制对话框 -->
    <el-dialog
      width="700px"
      :title="dTitle"
      :visible.sync="dVisible"
      append-to-body
      @close="closeDialog">
      <el-row class="line">
        <el-card shadow="never">
          <div id="mapContent" ref="mapContent"></div>
        </el-card>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'MapDialog',
  emits: ['isClose'],
  props: ['dialogVisible', 'dialogTitle'],
  data(){
    return {
      // 显示/隐藏
      dVisible: false,
      // 弹出框名称
      dTitle: '定位',
    }
  },
  watch:{

    dialogVisible(){
      this.dVisible = this.dialogVisible
    },
    dialogTitle(){
      this.dTitle = this.dialogTitle
    }
  },
  mounted() {
    this.getMap()
  },
  methods: {
    submit(){

    },
    // 初始化地图
    async getMap() {
      var map;
      var zoom = 12;
      var center;
      var localsearch;
      var radius = 5000;
      var infoWin;
      center = new T.LngLat(116.63072, 40.054952)
      map = new T.Map("mapContent");
      map.centerAndZoom(center, zoom);
      var icon = new T.Icon({
        iconUrl: "http://api.tianditu.gov.cn/img/map/markerA.png",
        iconSize: new T.Point(19, 27),
        iconAnchor: new T.Point(10, 25)
      });
      var marker = new T.Marker(center, {icon: icon});// 创建标注
      map.addOverLay(marker);
      var infoWin1 = new T.InfoWindow();
      var sContent =
          "<div style='margin:0px;'>" +
          "<div style='margin:10px 10px; '>" +
          "<div>电话 : (010)88187700 <br>地址：北京市顺义区机场东路国门商务区地理信息产业园2号楼天地图大厦" +
          "</div>" +
          "</div>";
      infoWin1.setContent(sContent);
      marker.addEventListener("click", function () {
        marker.openInfoWindow(infoWin1);
      });// 将标注添加到地图中
    },
    closeDialog(){
      this.$emit('isClose', true)
    },
  }
}
</script>

<style scoped lang="scss">
.line{
  height: 500px;
  ::v-deep .el-card__body{
    width: 700px;
    height: 500px;
    background-color: white;
  }
}
#mapContent{
  width: 500px;
  margin: 0 auto;
  height: 500px;
}
</style>
